import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { InfiniteScroll } from 'antd-mobile'
import styles from './css/list.module.css'
import http from '../../api/http'


const List = () => {
    const nav = useNavigate()
    const [sp] = useSearchParams()
    const start = sp.get("start")
    const end = sp.get("end")

    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(true)
    const getData = async () => {
        const res = await http.get("/api/trip/airplane", {
            params: { start, end, page }
        })
        console.log(res.data.data);
        setList([...list, ...res.data.data])
        setPage(page + 1)
        if (res.data.data.length === 0) {
            setHasMore(false)
        }
    }
    useEffect(() => {
        getData()
    }, [])


    const getDeail=(v)=>{
        nav(`/deail?start=${start}&end=${end}`,{state:v})
    }
    return (
        <div>
            <NavBar onBack={() => nav("/")}>{start}——{end}</NavBar>

            <div className={styles.box}>
                {
                    list.map((v, i) => {
                        return <dl key={i} className={styles.dl} onClick={()=>getDeail(v)}>
                            <dt>
                                <div>{v.dasn}</div>
                                <div>{v.dt}</div>
                            </dt>
                            <dd>
                                <div>{v.aat}</div>
                                <div>{v.aasn}</div>
                            </dd>
                            <dd>
                                <div>{v.at}</div>
                                <div>￥{v.lps[0].atp}</div>
                            </dd>
                        </dl>
                    })
                }
            </div>
            <InfiniteScroll loadMore={getData} hasMore={hasMore} />
        </div>
    )
}

export default List
